<template>
  <div class="v-search-element">
    <div class="g-tc">
      <el-input
        v-model="searchText"
        :placeholder="$t('搜索关键字')"
      >
        <template #append>
          <el-button :icon="Search"></el-button>
        </template>
      </el-input>
    </div>

    <div class="_content">
      <div
        v-if="listFilterd.length === 0"
        class="g-tc"
        style="line-height: 26px"
      >
        {{ $t("无匹配项") }}
      </div>
      <div
        v-if="listFilterd.length > 0 && !collapse"
        class="_content-box"
      >
        <div style="display: inline-block; min-width: 100%">
          <div
            v-for="item in listFilterd"
            :key="item.key"
            class="_item g-one-line"
            style="overflow: unset"
            @click="handleClickItem(item)"
          >
            <el-checkbox
              v-if="checkable"
              :checked="selectedId.has(item.key)"
            ></el-checkbox>
            <img
              :src="item.icon"
              class="g-m-r-4 g-m-l-8"
              onerror="this.src='statics/images/sysml/Stereotype.svg'"
              style="width: 16px; height: 16px; object-fit: contain"
            />
            <span>{{ item.forbidTranslate ? item.label : $t(item.label) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { MenuItem } from "../../../graphTabs/diagramTableNew/config/toolBar";

interface Props {
  collapse?: boolean;
  checkable?: boolean;
  menu?: MenuItem[];
}

const props = withDefaults(defineProps<Props>(), {
  collapse: false,
  checkable: false,
  menu: () => []
});

const emit = defineEmits<{
  (e: "clickItem", menuItem: MenuItem): void;
}>();

const searchText = ref("");
const listFilterd = computed(() => {
  return props.menu.filter(item => item.label.toLowerCase().includes(searchText.value.toLowerCase()));
});
const selectedId = ref<Set<string>>(new Set());

const handleClickItem = (menuItem: MenuItem) => {
  emit("clickItem", menuItem);
};
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-search-element {
  width: 234px;
  padding: 10px;
  .el-input__inner {
    height: 26px;
    border-color: #d9d9d9;
  }
  .el-input-group__append {
    border-color: #d9d9d9;
    border-radius: 0;
    padding: 0;
    .el-button {
      margin: 0;
      border: 0;
      padding: 5px 9px;
      .el-icon {
        font-size: 14px;
      }
    }
  }
  ._content {
    max-height: 439px;
    min-height: 30px;
    margin-top: 10px;
    ._content-box {
      max-height: 390px;
      overflow: auto;
      border: 1px solid rgba(0, 0, 0, 0.15);
      line-height: 1;
      ._item {
        height: 24px;
        line-height: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        &.selected {
          background: $theme-color;
          color: #fff;
        }
        &:hover {
          background: $theme-color;
          color: #fff;
        }
      }
    }
  }
}
</style>
